import { shareAppMessageSet } from "../../../utils/config"
import { dataCollection } from "../../../utils/dataCollection"
import { swiperProps } from "../../../utils/type"

interface FocusItem {
  tag: string
  msg: string
}

interface ContentProps {
  tab: any[]
  list: any[]
  index: number
}

interface DataProps {
  focus: FocusItem[]
  content: ContentProps
  signUpMsg: string
  className: string
  swiperList: swiperProps[]
  pageReady:boolean
  themeCode:string
  tabScollTop: number,
  tabIsScoll: boolean,
  scrollTop: number,
}
let className = ''
Page({

  /**
   * 页面的初始数据
   */
  data: <DataProps>{
    pageReady:false,
    focus: [],
    content: {
      index: 0,
      tab: ['课程内容', '费用清单', '学习流程', '退款说明'],
      list: []
    },
    className: '',
    signUpMsg: '',
    swiperList: [],
    themeCode:'',
    tabScollTop: 0,
    tabIsScoll: false,
    scrollTop: 0,
  },
  onLoad: function (options: any) {
    //从本地获取当前选择的城市编码
    this.setData({
      themeCode:wx.getStorageSync('themeCode')
    })

    const classDetail = wx.getStorageSync('classDetail')

    className = classDetail.className

    const arr: swiperProps[] = []
    classDetail.classVideo.forEach((item: any) => {
      const obj: swiperProps = {
        type: 'video',
        url: item.videoUrl,
        poster: item.coverUrl
      }
      arr.push(obj)
    })
    classDetail.classPic.forEach((item: any) => {
      const obj: swiperProps = {
        type: 'image',
        url: item.picUrl
      }
      arr.push(obj)
    })

    //课程内容 费用清单 学习流程 退款说明
    const list: string[] = [classDetail.courseContent, classDetail.feeList, classDetail.studyFlow, classDetail.refundExplain]

    this.setData({
      focus: classDetail.classExplain,
      className: classDetail.className,
      signUpMsg: classDetail.signUpMsg,
      swiperList: arr,
      pageReady:true,
      'content.list': list
    })
    setTimeout(() => {
      const query = wx.createSelectorQuery();
      query.select("#carousel").boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec((res) => {
        console.log("carousel", res);
        this.setData({
          tabScollTop: res[0].height,
        });
      });
      const query2 = wx.createSelectorQuery();
      query2.select("#content-box").boundingClientRect();
      query2.selectViewport().scrollOffset();
      query2.exec((res) => {
        console.log("content-box", res);
        this.setData({
          tabScollTop: this.data.tabScollTop + res[0].height,
        });
      });
    }, 500);
  },
  onHide() {
    dataCollection.setPageMapData('leave')
    dataCollection.setComprehensiveMapData(className,'leave','class')
  },
  onShow() {
    dataCollection.setPageMapData('enter', '班级详情')
    dataCollection.setComprehensiveMapData(className,'enter','class')
  },
  onUnload(){
    dataCollection.setPageMapData('leave')
    dataCollection.setComprehensiveMapData(className,'leave','class')
  },
  onSelectContentTab(res: any) {
    this.setData({
      'content.index': res.currentTarget.dataset.index
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    return { ...shareAppMessageSet() }
  },
  n: 0,
  bindscroll(res: any) {
    if (
      res.detail.scrollTop >= this.data.tabScollTop &&
      this.n === 0 &&
      !this.data.tabIsScoll
    ) {
      this.n = 1;
      this.setData({
        tabIsScoll: true,
      });
    } else if (
      res.detail.scrollTop < this.data.tabScollTop &&
      this.n === 1 &&
      this.data.tabIsScoll
    ) {
      this.n = 0;
      this.setData({
        tabIsScoll: false,
      });
    }
  },
})